<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include/public/Header::head('登录')" >
</head>
<body>
    <div class="row login_container">
        <div class="col-sm-7 col_photo">
            <img class="login_pic" th:src="@{/pic/public/login.png}">
        </div>
        <div class="col-sm-5 col_form">
            <div class="form">
                <h1 class="form_title">快递工资管理系统登录</h1>
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="id_name"><span class="iconfont icon-zhanghao"></span></span>
                            </div>
                            <input type="text" class="form-control" id="id" placeholder="请输入你的工号ID" v-model.trim="user.sid" aria-describedby="id_name">
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="pwd_name"><span class="iconfont icon-mima"></span></span>
                            </div>
                            <input type="password" class="form-control" id="pwd" placeholder="请输入你的密码" v-model.trim="user.password" aria-describedby="pwd_name">
                        </div>
                    </div>

                    <div class="btn-login-group">
                        <button class="btn-login btn btn-lg btn-info" @click="login">登录</button>
                        <a class="btn-register btn btn-lg btn-info" href="register">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function(){
        var data4Vue = {
            uri: 'login',
            user:{sid:'',password:''},
        };

        //ViewModel
        var vue = new Vue({
            el: '.login_container',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            },
            methods: {
                login:function(){
                    if(this.user.sid.length==0){
                        alert("请输入您的工号！")
                    }
                    if(this.user.password.length==0){
                        alert("请输入你的密码!")
                    }
                    var url=this.uri;
                    axios.post(url,this.user).then(function(response) {
                        let result=response.data;
                        if (result=="") {
                            alert("账号密码错误！")
                        }else {
                            alert("登陆成功")
                            if(result.baseInfo.position=='店长')
                                location.href = "/main"
                            else if(result.baseInfo.position=='快递员')
                                location.href = "/job"
                            else if(result.baseInfo.position=='财务')
                                location.href = "/rule"
                            else if(result.baseInfo.position=='内勤')
                                location.href = "/orderPage"
                        }
                    })
                },
            }
        });
    });
</script>
</html>
